常用 HTML元素 - 2

接下来再学习一些常用的HTML元素

表格 table

要把信息呈现在表格中，可以使用 table 元素

如下所示：

<table>
    <tr>
        <th>学生</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>白月</td>
        <td>23</td>
    </tr>
    
    <tr>
        <td>黑羽</td>
        <td>35</td>
    </tr>
</table>

其中

tr元素

表示表格的一行。里面包含了一行的内容，可以是多个 th元素 或者 td 元素

th元素

表示表格的一列的标题

td元素

表示表格的一个单元格。

大家会发现上面的html呈现的表格是没有分隔线的，可以通过给元素添加边界线样式呈现分隔线

<table style="border-collapse: collapse;">
    <tr>
        <th style="border: 1px solid green;">学生</th>
        <th style="border: 1px solid green;">年龄</th>
    </tr>
    <tr>
        <td style="border: 1px solid green;">白月</td>
        <td style="border: 1px solid green;">23</td>
    </tr>
    
    <tr>
        <td style="border: 1px solid green;">黑羽</td>
        <td style="border: 1px solid green;">35</td>
    </tr>
</table>

table 的样式 border-collapse 指定了table里面的单元格是否共享边界。

缺省值 separate 表示不共享，这样显示效果就是每个单元格有各自的边界，通常不好看

值为 collapse 表示共享，这样相邻单元格只有一个边界，比较好看

我们发现为每个 th、td指定同样的样式太麻烦了，可以放在 head 里的 style 中指定，对所有的表格元素都生效。

像这样

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
        border-collapse: collapse;
    }
    th,td {
      border: 1px solid green;      
    }
  </style>
</head>

<body>
<table>
    <tr>
        <th>学生</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>白月</td>
        <td>23</td>
    </tr>
    
    <tr>
        <td>黑羽</td>
        <td>35</td>
    </tr>
</table>

</body>
</html>

指定宽度，居中

表格整体和列都是自适应宽度的，如果要变为指定宽度，可以使用样式的 width，

比如

<table style="width: 60%">

<th style="width: 50%">学生</th>

缺省 th 是自动居中的，如果想让td里面的文本也居中显示，可以使用如下css

td {
  text-align: center; 
  vertical-align: middle;
}

完整示例如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
    }

    td,  th
    {
      border: 1px solid green;
      text-align: center; 
      vertical-align: middle;
    }
  </style>
</head>
<body>


<table style="width: 60%">
    <tr>
      <th>学生</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>白月</td>
      <td>23</td>
    </tr>
    
    <tr>
      <td>黑羽</td>
      <td>35</td>
    </tr>
</table>

</body>
</html>

单元格合并

可以使用 colspan 和 rowspan 属性进行单元格的列、行合并

如下所示

<!DOCTYPE html>
<html>
<head>
  <style>    
    table {
      border-collapse: collapse;
    }

    td, th {
      border: 1px solid green;
      text-align: center; 
      vertical-align: middle;
    }

    th {
      width: 12.5%
    }

  </style>
</head>
<body>


<table style="width: 90%">
  <tr>
    <th colspan="8">白月黑羽培训日程安排</td>
  </tr>

  <tr>
    <th>8点</td>
    <th>9点</td>
    <th>10点</td>
    <th>11点</td>
    <th>14点</td>
    <th>15点</td>
    <th>16点</td>
    <th>17点</td>
  </tr>
  
  <tr>
    <td colspan="4">C语言</td>
    <td>答疑</td>
    <td>答疑</td>
    <td>自由交流</td>
    <td>晚饭</td>
  </tr>

  <tr>
    <td colspan="6" rowspan="2">Python语言</td>
    <td>答疑</td>
    <td>晚饭</td>
  </tr>

  <tr>
    <td>答疑</td>
    <td>晚饭</td>
   
  </tr>
</table>

</body>
</html>

列表 list

我们经常需要把信息展示为列表，比如操作步骤、今日新闻、药品成分等等

HTML针对列表信息的展示主要是通过 ol 和 ul 这两个元素

ol

ol （Ordered list）元素表示 有序列表，内容条目用 li 元素，条目是有次序的

缺省渲染为一个带编号的列表

如下

<h3> 自动化测试实战班学习路线 </h3>
<ol>
  <li>Python编程实战</li>
  <li>web 测试自动化</li>
  <li>自动化测试框架</li>
  <li>API 测试自动化</li>
  <li>Linux、MySQL</li>
  <li>项目实战第1阶段</li>
  <li>项目实战第2阶段</li>
  <li>移动App 测试自动化</li>
  <li>项目实战第3阶段</li>
</ol>

ul

ul （Unordered list）元素表示 无序列表 ，内容条目用 li 元素，条目是次序无关的

通常渲染为一个带符号前缀的列表

如下

<h3> 白月黑羽实战班 课程列表 </h3>
<ul>
  <li>自动化软件测试</li>
  <li>性能测试</li>
  <li>PyQT图形界面程序开发</li>
  <li>Web网站后端开发</li>
  <li>爬虫数据处理自动化</li>
</ul>

每个条目 li 里面还可以嵌套嵌套其它的 ul、ol，比如

<h3> 白月黑羽实战班课程 </h3>
<ul>
  <li>自动化软件测试
    <ol>
        <li>Python编程实战</li>
        <li>web 测试自动化</li>
        <li>自动化测试框架</li>
        <li>API 测试自动化</li>
        <li>Linux、MySQL</li>
        <li>项目实战第1阶段</li>
        <li>项目实战第2阶段</li>
        <li>移动App 测试自动化</li>
        <li>项目实战第3阶段</li>
    </ol>
  </li>

  <li>性能测试</li>

  <li>PyQT图形界面程序开发      
    <ul>
        <li>Python编程实战</li>
        <li>HTTP协议数据交互</li>
        <li>MySQL 数据库 </li>
        <li>Qt图形界面程序开发</li>
        <li>socket网络编程</li>
        <li>项目实战1 数据处理工具</li>
        <li>项目实战2 性能测试工具</li>
    </ul>
  </li>
  
  <li>Web网站后端开发</li>
  <li>爬虫数据处理自动化</li>
</ul>

同样，ol 每个条目 li 里面，也可以嵌套其它的 ul、ol

list-style-type

很多时候，我们使用 ul/ol，并不希望列出的条目有前缀的点或者数字

比如菜单栏、导航栏。

这时侯，可以设置 list-style-type:none

比如

<h3> 白月黑羽实战班 课程列表 </h3>
<ul style='list-style-type: none;'>
  <li>自动化软件测试</li>
  <li>性能测试</li>
  <li>PyQT图形界面程序开发</li>
  <li>Web网站后端开发</li>
  <li>爬虫数据处理自动化</li>
</ul>

list-style-type 的常见取值可以是如下这些

none 不显示列表项的标记。
disc 实心圆点 (默认值)
circle 空心圆点
square 实心方块
decimal 十进制阿拉伯数字从1开始
simp-chinese-informal

中文十进制数例如: 一, 二, 三, …, 九八, 九九, 一〇〇
decimal-leading-zero

十进制阿拉伯数字，前缀用0补齐，比如 01、02、03
lower-roman

小写罗马字母，比如 i, ii, iii, iv, v
upper-roman

大写罗马字母，比如 I, II, III, IV, V
lower-alpha

小写英文字母，比如 a, b, c, … z
upper-alpha

大写英文字母，比如 A, B, C, … Z

上面这些对ol、ul都有效